/**
 * product
 */
let [jsHotList, jsGirlList, jsBoyList, jsHysList, jsOtherList, jsShopList, ulList] = [
    $$(".js_hot"), $$(".js_girl"), $$(".js_boy"), $$(".js_hys"), $$(".js_other"), $$(".js_shop"), $(".ulList")
]
class Render{
    constructor(){}
    init(jsHotList, jsGirlList, jsBoyList, jsHysList, jsOtherList, jsShopList, ulList){
        this.jsHotList = jsHotList;
        this.jsGirlList = jsGirlList;
        this.jsBoyList = jsBoyList;
        this.jsHysList = jsHysList;
        this.jsOtherList = jsOtherList;
        this.jsShopList = jsShopList;
        this.ulList = ulList;
        this.renderPage();
        this.renderList();
    }
    renderPage(){
        let url = "../json/five.json";
        xhrGet(url)
        .then((res)=>{
            res = JSON.parse(res);
            let data = res.Data;      
            let html = "";
            var itemArr = [];
            for (let key in data) {
                let arr = data[key];
                let length = arr.length;           
                for (var i = 0; i < length; i++) {
                    html += '<li>' +
                                '<a data-id="'+arr[i].ID+'" class="img" target="_blank">' +
                                    '<img src="../images/loading.gif" data-src="' + arr[i].FaceSrc + '" alt="' + arr[i].Name + '">' +
                                '</a>' +
                                '<p class="price">' +
                                    '<i>￥</i>' +
                                    arr[i].Price +
                                '</p>' +
                                '<p class="name">' +
                                    '<a target="_blank">' +
                                        arr[i].Name +
                                    '</a>' +
                                '</p>' +
                            '</li>'
                    var item = {
                        id : arr[i].ID,
                        img : arr[i].FaceSrc,
                        price : arr[i].Price,
                        name : arr[i].Name
                    }
                    itemArr.push(item);
                }
                if(key === "hot") this.jsHotList.innerHTML = html;           
                if(key === "girl") this.jsGirlList.innerHTML = html;          
                if(key === "boy") this.jsBoyList.innerHTML = html;           
                if(key === "hys") this.jsHysList.innerHTML = html;            
                if(key === "other") this.jsOtherList.innerHTML = html;
                html = "";   
                 
            }
            this.ulList.on('click', '.img', function(){
                window.open('./detailList.html');
                let id = $(this).attr("data-id");
                for(var i = 0; i < itemArr.length; i++){
                    if(id == itemArr[i].id){
                        itemArr[i] = JSON.stringify(itemArr[i]);
                        localStorage.setItem("goods", itemArr[i]);
                        return false;
                    }
                }
                
            })    
            lazyload(".img img");
        })
    }
    renderList(){
        let url = "../json/list.json";
        xhrGet(url)
        .then((res)=>{
            res = JSON.parse(res);
            let arr = res.Data;
            let length = arr.length;
            let html = "";
            for (var i = 0; i < length; i++) {
                html += '<a href="http://www.hanfugou.com/shop/'+arr[i].ID+'?from=default" target="_blank">'+
                            '<img src="'+arr[i].LogoSrc+'">'+
                        '</a>'
            }
            this.jsShopList.innerHTML = html;
        })
    }
}
var render = new Render();
render.init(jsHotList, jsGirlList, jsBoyList, jsHysList, jsOtherList, jsShopList, ulList);

